<h4 class="site-thititle">1. 方向性图标</h4>
<div class="site-info">
    <ul class="icons-list">
        <%
                var directIcons = ["step-backward", "step-forward", "fast-backward", "fast-forward", "shrink", "arrawsalt", "down", "up", "left", "right", "caret-up", "caret-down", "caret-left", "caret-right", "up-circle", "down-circle", "left-circle", "right-circle", "verticalleft", "verticalright", "doubleright", "doubleleft", "forward", "backward", "rollback", "enter", "retweet", "swap", "swap-left", "swap-right", "arrowup", "arrowdown", "arrowleft", "arrowright", "play-circle", "up-square", "down-square", "left-square", "right-square", "login", "logout", "indent", "outdent", "border-bottom", "border-horizontal", "border-inner", "border-left", "border-right", "border-top", "border-verticle", "pic-center", "pic-left", "pic-right", "radius-bottomleft", "radius-bottomright", "radius-upleft", "fullscreen", "fullscreen-exit"];
            %>
        <% for (let i = 0; i< directIcons.length; i++) { %>
        <li class="icon-item">
            <i class="hiicon hiicon-<%=directIcons[i] %>"></i>
            <span class="icon-badge">
                <%=directIcons[i] %></span>
        </li>
        <% } %>
    </ul>
</div>
<h4 class="site-thititle">2. 提示建议性图标</h4>
<div class="site-info">
    <ul class="icons-list">
        <%
                var directIcons = ["question", "question-circle", "plus", "plus-circle", "pause", "timeout", "minus", "minus-circle", "plus-square", "minus-square", "infomation", "info-circle", "exclaimination", "info-circle", "close", "close-circle", "close-square", "check", "check-circle", "check-square", "time-circle", "warning-circle", "issuesclose", "stop"];
            %>
        <% for (let i = 0; i< directIcons.length; i++) { %>
        <li class="icon-item">
            <i class="hiicon hiicon-<%=directIcons[i] %>"></i>
            <span class="icon-badge">
                <%=directIcons[i] %></span>
        </li>
        <% } %>
    </ul>
</div>
<h4 class="site-thititle">3. 编辑类图标</h4>
<div class="site-info">
    <ul class="icons-list">
        <%
                var directIcons = ["edit", "edit-square", "file-copy", "scissor", "delete", "snippets", "diff", "highlight", "align-center", "align-left", "align-right", "bg-colors", "bold", "italic", "underline", "strikethrough", "redo", "undo", "zoomin", "zoomout", "font-colors", "font-size", "line-height", "dash", "small-dash", "sort-ascending", "sort-descending", "drag", "radius-setting", "column-width", "column-height"];
            %>
        <% for (let i = 0; i< directIcons.length; i++) { %>
        <li class="icon-item">
            <i class="hiicon hiicon-<%=directIcons[i] %>"></i>
            <span class="icon-badge">
                <%=directIcons[i] %></span>
        </li>
        <% } %>
    </ul>
</div>
<h4 class="site-thititle">4. 数据类图标</h4>
<div class="site-info">
    <ul class="icons-list">
        <%
                var directIcons = ["areachart", "piechart", "barchart", "pointmap", "linechart", "radarchart", "heatmap", "fall", "rise", "stock", "boxplot", "fund", "sliders"];
            %>
        <% for (let i = 0; i< directIcons.length; i++) { %>
        <li class="icon-item">
            <i class="hiicon hiicon-<%=directIcons[i] %>"></i>
            <span class="icon-badge">
                <%=directIcons[i] %></span>
        </li>
        <% } %>
    </ul>
</div>
<h4 class="site-thititle">5. 网站通用图标</h4>
<div class="site-info">
    <ul class="icons-list">
        <%
                var directIcons = ["accountbook", "aim", "alert", "apartment", "api", "appstoreadd", "appstore", "audio", "audiostatic", "audit", "bank", "barcode", "unorderedlist", "bell", "block", "book", "border", "table1", "branches", "bug", "build", "bulb", "calculator", "calendar", "camera", "car", "carryout", "ci", "clear", "cloud-download", "cloud", "cloud-server", "cloud-sync", "cloud-upload", "cluster", "comment", "compass", "console-sql", "contacts", "container", "control", "copyright", "creditcard", "crown", "customerservice", "dashboard", "database", "deletecolumn", "deleterow", "deploymentunit", "desktop", "disconnect", "like", "unlike", "dollar", "download", "ellipsis", "location", "euro", "file-exception", "experiment", "export", "eye", "eye-close", "field-binary", "field-number", "field-string", "field-time", "file-add", "filedone", "file-excel", "file-exclamation", "file", "file-gif", "file-image", "file-markdown", "file-pdf", "file-ppt", "fileprotect", "filesearch", "filesync", "file-text", "file-unknown", "file-word", "file-zip", "filter", "fire", "flag", "folder-add", "folder", "folder-open", "folder-view", "fork", "formatpainter", "frown", "function", "fund", "view", "gateway", "gif", "gift", "earth", "gold", "group", "database", "heart", "reloadtime", "home", "hourglass", "idcard", "import", "insertrowbelow", "insertrowabove", "insertrowleft", "insertrowright", "insurance", "interation", "key", "laptop", "layout", "line", "link", "reload", "lock", "mail", "man", "woman", "medicinebox", "meh", "menu", "merge-cells", "message", "mobile", "moneycollect", "monitor", "compress", "expend", "collapse", "expand", "index", "notification", "number", "onetoone", "link", "apartment", "yuan", "percentage", "phone", "image", "play-square", "pound", "poweroff", "printer", "project", "propertysafety", "pushpin", "qrcode", "read", "reconciliation", "redenvelope", "reload", "rest", "robot", "rocket", "rotate-left", "rotate-right", "safetycertificate", "save", "scan", "securityscan", "search", "select", "send", "setting", "shake", "share", "shop", "shopping", "sisternode", "skin", "smile", "solution", "sound", "star", "subnode", "sync", "table", "tablet", "tag", "tags", "team", "thunderbolt", "totop", "trademark", "transaction", "translate", "trophy", "ungroup", "unlock", "upload", "usb", "adduser", "deleteuser", "user", "switchuser", "addteam", "deleteteam", "team", "verified", "video", "videocameraadd", "wallet", "whatsapp", "wifi"];
            %>
        <% for (let i = 0; i< directIcons.length; i++) { %>
        <li class="icon-item">
            <i class="hiicon hiicon-<%=directIcons[i] %>"></i>
            <span class="icon-badge">
                <%=directIcons[i] %></span>
        </li>
        <% } %>
    </ul>
</div>
<h4 class="site-thititle">6. 品牌和标识</h4>
<div class="site-info">
    <ul class="icons-list">
        <%
                var directIcons = ["android", "apple", "windows", "ie", "chrome", "github-fill", "aliwangwang", "dingtalk", "weibo-square-fill", "weibo-circle-fill", "taobao-circle-fill", "html", "weibo", "twitter", "wechat-fill", "youtube", "alipay-circle-fill", "taobao", "skype", "qq", "gitlab", "medium", "linkedin", "googleplus", "dropbox", "facebook", "codepen", "amazon", "google", "codepen-circle-fill", "alipay", "antdesign", "ant-cloud", "alibabacloud", "zhihu", "slack", "slack-square-fill", "behance", "behance-square-fill", "dribbble", "dribbble-square-fill", "instagram", "yuque", "alibaba", "yahoo", "reddit", "sketch"];
            %>
        <% for (let i = 0; i< directIcons.length; i++) { %>
        <li class="icon-item">
            <i class="hiicon hiicon-<%=directIcons[i] %>"></i>
            <span class="icon-badge">
                <%=directIcons[i] %></span>
        </li>
        <% } %>
    </ul>
</div>
<h4 class="site-thititle">7. Spin 加载中</h4>
<div class="site-info">
    <span class="hiicon hiicon-setting hiicon-spin text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-reload hiicon-spin text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-redo hiicon-spin text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-undo hiicon-spin-reverse text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-sync hiicon-spin text-primary" style="font-size:30px;"></span>
</div>